import { Navigate, useRoutes } from 'react-router-dom'
import { lazy ,Suspense } from 'react'
const List =lazy(()=>import('../components/List') )
const Home =lazy(()=>import('../pages/Main/Home') )
const About =lazy(()=>import('../pages/Main/About') )
const Main =lazy(()=>import('../pages/Main') )
const Login =lazy(()=>import('../pages/Login') )
const NotFound =lazy(()=>import('../components/404') )


const load =(Comp)=>{
    return (
        <Suspense fallback={<h1>Loading......</h1>}>
            <Comp/>
        </Suspense>
    )
}

const routes =[
    {
        path:'/login',
        element:load(Login)
    },
    {
        path:'/main',
        element:load(Main),
        children:[
            {
                path:'/main/home',
                element:load(Home),
                children:[
                    {
                        path:'/main/home/music/:id',
                        element:load(List)
                    },            {
                        path:'/main/home/news/:id',
                        element:load(List)
                    }
                ]
            },    
            {
                path:'/main/about',
                element:load(About)
            }
        ]
    },
    {
        path:'*',
        element:load(NotFound)
    },
    {
        path:'/',
        element:<Navigate to='/Login' />
    }

]

export default routes